﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<p color="black">
					您正在做的业务是：人力资源--人力资源档案管理--人力资源档案复核
				</p>
			</td>
		</tr>
		<tr>
			<td align="right">
				<input type="submit" value="复核通过" class="BUTTON_STYLE1" v-on:click="tj" />
				<input type="reset" value="清除" class="BUTTON_STYLE1" />
				<input type="button" value="返回" class="BUTTON_STYLE1"
					   onclick="history.back();">
			</td>
		</tr>
	</table>
	<table width="100%" border="1" cellpadding=3 cellspacing=1
		   bordercolorlight=#848284 bordercolordark=#eeeeee
		   class="TABLE_STYLE1">
		<tr>
			<td class="TD_STYLE1">
				档案编号
			</td>
			<td colspan="7" class="TD_STYLE2">
				<el-input v-model="from.bh" readonly type="text" name="engageResume.humanAddress" class="INPUT_STYLE2">
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1" width="11%">
				I级机构
			</td>
			<td width="14%" class="TD_STYLE2">
				<el-select v-model="obj.yjjg" placeholder="--请选择--" class="aaa">
					<el-option v-for="item in options1"
							   :key="item.firstKindId"
							   :label="item.firstKindName"
							   :value="item.firstKindId+item.firstKindName"
							   v-on:click="jly(item.firstKindId)" />
				</el-select>
			</td>
			<td width="11%" class="TD_STYLE1">
				II级机构
			</td>
			<td width="14%" class="TD_STYLE2">
				<el-select v-model="obj.ejjg" placeholder="--请选择--" class="aaa">
					<el-option v-for="item in options2"
							   :key="item.secondKindId"
							   :label="item.secondKindName"
							   :value="item.secondKindId+item.secondKindName"
							   v-on:click="jle(item.secondKindId)" />
				</el-select>
			</td>
			<td width="11%" class="TD_STYLE1">
				III级机构
			</td>
			<td class="TD_STYLE2" colspan="2">
				<el-select v-model="obj.sjjg" placeholder="--请选择--" class="aaa">
					<el-option v-for="item in options3"
							   :key="item.thirdKindId"
							   :label="item.thirdKindName"
							   :value="item.thirdKindId+item.thirdKindName" 
							   v-on:click="jgfl" />
				</el-select>
			</td>
			<td rowspan="5" style="text-align: center;">
				<el-upload class="avatar-uploader"
						   action="/HF/Upload"
						   :show-file-list="false"
						   :on-success="handleAvatarSuccess"
						   :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				职位分类
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="obj.zwfl" placeholder="--请选择--" class="aaa">
					<el-option v-for="item in options4"
							   :key="item.majorKindId"
							   :label="item.majorKindName"
							   :value="item.majorKindId+item.majorKindName"
							   v-on:click="jls(item.majorKindId)" />
				</el-select>
			</td>
			<td class="TD_STYLE1">
				职位名称
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="obj.zwmc" placeholder="--请选择--" class="aaa">
					<el-option v-for="item in options5"
							   :key="item.majorId"
							   :label="item.majorName"
							   :value="item.majorId+item.majorName" 
							   v-on:click="zwfl" />
				</el-select>
			</td>
			<td class="TD_STYLE1">
				职称
			</td>
			<td colspan="2" class="TD_STYLE2">
				<el-select v-model="from.zc" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in options"
							   :key="item.value"
							   :label="item.label"
							   :value="item.label" />
				</el-select>
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				姓名
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.xm" type="text" id="humanName" name="humanFile.humanName"
						  class="INPUT_STYLE2" />
			</td>
			<td class="TD_STYLE1">
				性别
			</td>
			<td class="TD_STYLE2">
				<el-select placeholder="--请选择--" v-model="from.xb">
					<el-option value="男" selected="selected">
						男
					</el-option>
					<el-option value="女">
						女
					</el-option>
				</el-select>
			</td>
			<td class="TD_STYLE1">
				EMAIL
			</td>
			<td colspan="2" class="TD_STYLE2">
				<el-input v-model="from.yx"
						  class="INPUT_STYLE2">
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				电话
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.dh"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				QQ
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.qq"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				手机
			</td>
			<td colspan="2" class="TD_STYLE2">
				<el-input v-model="from.sj"
						  class="INPUT_STYLE2">
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				住址
			</td>
			<td colspan="3" class="TD_STYLE2">
				<el-input v-model="from.zz"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				邮编
			</td>
			<td colspan="2" class="TD_STYLE2">
				<el-input v-model="from.yb"
						  class="INPUT_STYLE2">
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				国籍
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.gj" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in gj"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>

				</el-select>
			</td>
			<td class="TD_STYLE1">
				出生地
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.csd"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				生日
			</td>
			<td width="13%" class="TD_STYLE2">
				<el-input v-model="from.sr" readonly="readonly"
						  class="INPUT_STYLE2" id="birthday">
			</td>
			<td width="11%" class="TD_STYLE1">
				民族
			</td>
			<td class="TD_STYLE2" width="14%">
				<el-select v-model="from.mz" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in mz"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>

				</el-select>
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				宗教信仰
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.zjxy" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in zjxy"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>
				</el-select>
			</td>
			<td class="TD_STYLE1">
				政治面貌
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.zzmm" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in zzmm"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>
				</el-select>
			</td>
			<td class="TD_STYLE1">
				身份证号码
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.sfzhm" v-on:input="updateSalaryPaid"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				社会保障号码
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.shbzhm"
						  class="INPUT_STYLE2">
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				年龄
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.nl"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				学历
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.xl" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in xl"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>
				</el-select>
			</td>
			<td class="TD_STYLE1">
				教育年限
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.jynx" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in jynx"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>
				</el-select>
			</td>
			<td class="TD_STYLE1">
				学历专业
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.xlzy" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in xlzy"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>
				</el-select>
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				薪酬标准
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="obj.xcbz" placeholder="--请选择--" class="aaa">
					<el-option v-for="item in options6"
							   :key="item.standardId"
							   :label="item.standardName"
							   :value="item.standardId+item.standardName" 
							   v-on:click="xcfl" />
				</el-select>
			</td>
			<td class="TD_STYLE1">
				开户行
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.khh"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				帐号
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.zh"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				复核人
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.fhr"
						  readonly="readonly" class="INPUT_STYLE2">
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				复核时间
			</td>
			<td class="TD_STYLE2">
				<el-input v-model="from.fhsj" readonly="readonly"
						  class="INPUT_STYLE2">
			</td>
			<td class="TD_STYLE1">
				特长
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.tc" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in tc"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>
				</el-select>
			</td>
			<td class="TD_STYLE1">
				爱好
			</td>
			<td class="TD_STYLE2">
				<el-select v-model="from.ah" placeholder="--请选择--" class="SELECT_STYLE1">
					<el-option v-for="item in ah"
							   :label="item.attributeName"
							   :value="item.attributeName"></el-option>
				</el-select>
			</td>
			<td class="TD_STYLE1">
				&nbsp;
			</td>
			<td class="TD_STYLE2">
				&nbsp;
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				档案附件
			</td>
			<td colspan="7" class="TD_STYLE2">
				<el-input v-model="from.dafj" readonly type="text" name="engageResume.humanAddress" class="INPUT_STYLE2">
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				个人履历
			</td>
			<td colspan="7" class="TD_STYLE2">
				<textarea v-model="from.grll" rows="4"
						  class="TEXTAREA_STYLE1"></textarea>
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				家庭关系信息
			</td>
			<td colspan="7" class="TD_STYLE2">
				<textarea v-model="from.jtgxxx" rows="4"
						  class="TEXTAREA_STYLE1"></textarea>
			</td>
		</tr>
		<tr>
			<td class="TD_STYLE1">
				备注
			</td>
			<td colspan="7" class="TD_STYLE2">
				<textarea v-model="from.bz" rows="4" class="TEXTAREA_STYLE1"></textarea>
			</td>
		</tr>
	</table>
</div>
<script type="text/javascript">
	var { createApp, reactive, ref, computed, watchEffect } = Vue
	var app = createApp({
		setup() {
			const urlParams = new URLSearchParams(window.location.search);
			const rowData = JSON.parse(urlParams.get('rowData'));
			const uName = computed(() => {
				return sessionStorage.getItem('u');
				// return localStorage.getItem('u')
			})
			let obj = reactive({
				yjjg: "",
				ejjg: "",
				sjjg: "",
				zwfl: "",
				zwmc: "",
				xcbz: ""
			})
			let from = reactive({
				yjjgbh: "",
				yjjgmc: "",
				ejjgbh: "",
				ejjgmc: "",
				sjjgbh: "",
				sjjgmc: "",
				zwflbh: "",
				zwflmc: "",
				zwmcbh: "",
				zwmcmc: "",
				zc: "",
				xm: "",
				xb: "",
				yx: "",
				dh: "",
				qq: "",
				sj: "",
				zz: "",
				yb: "",
				gj: "",
				csd: "",
				sr: "",
				mz: "",
				zjxy: "",
				zzmm: "",
				sfzhm: "",
				shbzhm: "",
				nl: "",
				xl: "",
				jynx: "",
				xlzy: "",
				xcbzbh: "",
				xcbzmc: "",
				khh: "",
				zh: "",
				djr: "",
				jdsj: "",
				tc: "",
				ah: "",
				grll: "",
				jtgxxx: "",
				bz: "",
				xp: "",
				id: "",
				bh: "",
				fhr:"",
				fhsj:"",
				dafj:"",
				bgcs:""
			})
			//进行字段赋值
			if (rowData != null) {
				from.yjjgbh = rowData.firstKindId;
				from.yjjgmc = rowData.firstKindName;
				from.ejjgbh = rowData.secondKindId;
				from.ejjgmc = rowData.secondKindName;
				from.sjjgbh = rowData.thirdKindId;
				from.sjjgmc = rowData.thirdKindName;
				from.zwflbh = rowData.humanMajorKindId;
				from.zwflmc = rowData.humanMajorKindName;
				from.zwmcbh = rowData.humanMajorId;
				from.zwmcmc = rowData.hunmaMajorName;
				from.zc = rowData.humanProDesignation;
				from.xm = rowData.humanName;
				from.xb = rowData.humanSex;
				from.yx = rowData.humanEmail;
				from.dh = rowData.humanTelephone;
				from.qq = rowData.humanQQ;
				from.sj = rowData.humanMobilephone;
				from.zz = rowData.humanAddress;
				from.yb = rowData.humanPostcode;
				from.gj = rowData.humanNationality;
				from.csd = rowData.humanRace;
				from.sr = rowData.humanBirthday;
				from.mz = rowData.humanRace;
				from.zjxy = rowData.humanReligion;
				from.zzmm = rowData.humanParty;
				from.sfzhm = rowData.humanIdCard;
				from.shbzhm = rowData.humanSocietySecurityId;
				from.nl = rowData.humanAge;
				from.xl = rowData.humanEducatedDegree;
				from.jynx = rowData.humanEducatedYears;
				from.xlzy = rowData.humanEducatedMajor;
				from.xcbzbh = rowData.salaryStandardId;
				from.xcbzmc = rowData.salaryStandardName;
				from.khh = rowData.humanBank;
				from.zh = rowData.humanAccount;
				from.djr = rowData.register;
				from.jdsj = rowData.registTime;
				from.tc = rowData.humanSpeciality;
				from.ah = rowData.humanHobby;
				from.grll = rowData.humanHistroyRecords;
				from.jtgxxx = rowData.humanFamilyMembership;
				from.bz = rowData.remark;
				from.xp = rowData.humanPicture;
				from.bh = rowData.humanId;
				from.id = rowData.hufId;
				from.bgcs = rowData.fileChangAmount
				obj.yjjg = rowData.firstKindName;
				obj.ejjg = rowData.secondKindName;
				obj.sjjg = rowData.thirdKindName;
				obj.zwfl = rowData.humanMajorKindName;
				obj.zwmc = rowData.hunmaMajorName;
				obj.xcbz = rowData.salaryStandardName;
			}
			//下拉列表数据的绑定
			const options1 = ref();
			const options2 = ref();
			const options3 = ref();
			const options4 = ref();
			const options5 = ref();
			const options6 = ref();
			axios.post('/CFFK/GetCFFK')
				.then(function (response) {
					options1.value = response.data;
				})

			axios.get('/GetCMK')
				.then(function (response) {
					options4.value = response.data;
				})
			axios.get('/GetSS')
				.then(function (response) {
					options6.value = response.data;
				})
			let gj = ref([]);
			let mz = ref([]);
			let zjxy = ref([]);
			let zzmm = ref([]);
			let xl = ref([]);
			let jynx = ref([]);
			let xlzy = ref([]);
			let tc = ref([]);
			let ah = ref([]);
			axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
			axios.post('/GetCPCSSSAttributeKind', {
				name: "国籍"
			}).then(res => {
				gj.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "民族"
			}).then(res => {
				mz.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "宗教信仰"
			}).then(res => {
				zjxy.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "政治面貌"
			}).then(res => {
				zzmm.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "学历"
			}).then(res => {
				xl.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "教育年限"
			}).then(res => {
				jynx.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "专业"
			}).then(res => {
				xlzy.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "特长"
			}).then(res => {
				tc.value = res.data;
			});
			axios.post('/GetCPCSSSAttributeKind', {
				name: "爱好"
			}).then(res => {
				ah.value = res.data;
			});
			//点击一级下拉框，出现二级
			function jly(zhi) {
				axios.get(`/GetCFSKById/${zhi}`).then(response => {
					options2.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
				obj.ejjg = "";
				obj.sjjg = "";
			}
			//点击二级下拉框，出现三级
			function jle(zhi) {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.get('/GetCFTKById/' + zhi).then(response => {
					options3.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
				obj.sjjg = "";
			}
			//点击一级下拉框，出现二级
			function jls(zhi) {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.get('/GetCMById/' + zhi, {
					id: zhi
				}).then(response => {
					options5.value = response.data;
				}).catch(error => {
					console.error('Error fetching data:', error);
				});
				obj.zwmc = "";
			}
			//根据身份证获取生日,年龄,性别
			function updateSalaryPaid() {
				if (from.sfzhm.length !== 18) {
					return;
				}
				const birthYear = from.sfzhm.substring(6, 10);
				const birthMonth = from.sfzhm.substring(10, 12);
				const birthDay = from.sfzhm.substring(12, 14);

				from.sr = `${birthYear}-${birthMonth}-${birthDay}`;

				const today = new Date();
				const birthDate = new Date(`${birthYear}-${birthMonth}-${birthDay}`);
				let age = today.getFullYear() - birthDate.getFullYear();
				const m = today.getMonth() - birthDate.getMonth();
				if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}
				const gender = computed(() => {
					if (!from.sfzhm) return '';
					const genderCode = from.sfzhm.substring(16, 17);
					return genderCode % 2 === 0 ? '女' : '男';
				});
				from.nl = age;
				from.xb = gender;
			}
			//添加图片路径
			let imageUrl = ref("/images/" + from.xp)
			function handleAvatarSuccess(res, file) {
				imageUrl.value = URL.createObjectURL(file.raw);
				from.xp = res;
			}
			function beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
			//获取当前时间
			from.fhsj = ref(new Date().toLocaleString());

			// 如果你想要实时更新时间，可以使用watchEffect或setInterval
			watchEffect(() => {
				const interval = setInterval(() => {
					from.fhsj = new Date().toLocaleString();
				}, 1000);
			});
			//复核人
			from.fhr = uName;
			function tj() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/UpdateHF', {
					HufId: from.id,
					FirstKindId: from.yjjgbh,
					FirstKindName: from.yjjgmc,
					SecondKindId: from.ejjgbh,
					SecondKindName: from.ejjgmc,
					ThirdKindId: from.sjjgbh,
					ThirdKindName: from.sjjgmc,
					HumanName: from.xm,
					HumanAddress: from.zz,
					HumanPostcode: from.yb,
					HumanProDesignation: from.zc,
					HumanMajorKindId: from.zwflbh,
					HumanMajorKindName: from.zwflmc,
					HumanMajorId: from.zwmcbh,
					HunmaMajorName: from.zwmcmc,
					HumanTelephone: from.dh,
					HumanMobilephone: from.sj,
					HumanBank: from.khh,
					HumanAccount: from.zh,
					HumanQQ: from.qq,
					HumanEmail: from.yx,
					HumanHobby: from.ah,
					HumanSpeciality: from.tc,
					HumanSex: from.xb,
					HumanReligion: from.zjxy,
					HumanParty: from.zzmm,
					HumanNationality: from.gj,
					HumanRace: from.mz,
					HumanBirthday: from.sr,
					HumanBirthplace: from.csd,
					HumanAge: from.nl,
					HumanEducatedDegree: from.xl,
					HumanEducatedYears: from.jynx,
					HumanEducatedMajor: from.xlzy,
					HumanSocietySecurityId: from.shbzhm,
					HumanIdCard: from.sfzhm,
					Remark: from.bz,
					SalaryStandardId: from.xcbzbh,
					SalaryStandardName: from.xcbzmc,
					HumanHistroyRecords: from.grll,
					HumanFamilyMembership: from.jtgxxx,
					HumanPicture: from.xp,
					Checker: from.fhr,
					CheckTime: from.fhsj,
					HumanFileStatus: 1,
					CheckStatus:2,
					FileChangAmount:from.bgcs
				}).then(function (response) {
					if (response.data) {
						alert("成功");
						history.back();
					} else {
						alert("失败");
					}

				})
			}
			function jgfl() {
				from.yjjgbh = obj.yjjg.substring(0, 2);
				from.yjjgmc = obj.yjjg.substring(2);
				from.ejjgbh = obj.ejjg.substring(0, 2);
				from.ejjgmc = obj.ejjg.substring(2);
				from.sjjgbh = obj.sjjg.substring(0, 2);
				from.sjjgmc = obj.sjjg.substring(2);
				console.log(from);
			}
			function zwfl() {
				from.zwflbh = obj.zwfl.substring(0, 2);
				from.zwflmc = obj.zwfl.substring(2);
				from.zwmcbh = obj.zwmc.substring(0, 2);
				from.zwmcmc = obj.zwmc.substring(2);
				console.log(from);
			}
			function xcfl() {
				from.xcbzbh = obj.xcbz.substring(0, 17);
				from.xcbzmc = obj.xcbz.substring(17);
				console.log(from);
			}
			return {
				from,
				obj,
				options1,
				options2,
				options3,
				options4,
				options5,
				options6,
				jly,
				jle,
				jls,
				gj,
				mz,
				zjxy,
				zzmm,
				xl,
				jynx,
				xlzy,
				tc,
				ah,
				updateSalaryPaid,
				imageUrl,
				tj,
				handleAvatarSuccess,
				beforeAvatarUpload,
				jgfl,
				zwfl,
				xcfl,
				//下拉列表给的死值
				options: [{
					value: '选项1',
					label: '工程师'
				}, {
					value: '选项2',
					label: '助理'
				}, {
					value: '选项3',
					label: '经理'
				}],

			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app")
</script>
<style>
	/* CSS Document */
	* {
		FONT-FAMILY: 微软雅黑;
	}

	.resizeDivClass {
		position: relative;
		background-color: #DEDBD6;
		width: 2;
		z-index: 1;
		left: expression(this.parentElement.offsetWidth-1);
		cursor: e-resize;
	}

	A:visited {
		TEXT-DECORATION: none
	}

	A:active {
		TEXT-DECORATION: none
	}

	A:hover {
		TEXT-DECORATION: underline overline
	}

	A:link {
		TEXT-DECORATION: none
	}

	.t {
		LINE-HEIGHT: 1.4
	}

	BODY {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		display: block;
		margin: 8px;
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	DIV {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	FORM {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	OPTION {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	P {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	TD {
		FONT-FAMILY: ??;
		FONT-SIZE: 9pt
	}

	BR {
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	TEXTAREA {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	SELECT {
		BACKGROUND-COLOR: #FFFFCC;
		BORDER-BOTTOM-COLOR: #000000;
		BORDER-BOTTOM-WIDTH: 1px;
		BORDER-LEFT-COLOR: #000000;
		BORDER-LEFT-WIDTH: 1px;
		BORDER-RIGHT-COLOR: #000000;
		BORDER-RIGHT-WIDTH: 1px;
		BORDER-TOP-COLOR: #000000;
		BORDER-TOP-WIDTH: 1px;
		FONT-FAMILY: ����;
		FONT-SIZE: 9pt
	}

	.gray {
		CURSOR: pointer;
		FILTER: gray
	}

	.style3 {
		font-size: 16px;
		font-weight: bold;
	}

	.TABLE_STYLE1 {
		border: 1px solid;
		border-color: #000000;
		border-collapse: collapse;
		width: 100%;
	}

	.TABLE_STYLE2 {
		width: 100%;
	}

	.ALL-STYLE {
		border: 1px ridge #666666;
		border-color: #DEDBD6;
	}

	.TR_STYLE1 {
	}

	.style8 {
		color: #000066
	}



	.TD_HANDBOOK_STYLE1 {
		vertical-align: top;
		width: 100%;
		color: #0000FF;
	}

	.TD_STYLE1 {
		background-color: #FFDB6F;
		border-width: 1;
	}

	.TD_STYLE2 {
		border-spacing: 1px;
		background-color: #FFFFBB;
		border-color: #DEDBD6;
		border: 0;
	}

	.TD_STYLE3 {
	}

	.SUBMIT_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.BUTTON_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RESET_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.RADIO_STYLE1 {
	}

	.CHECKBOX_STYLE1 {
	}

	.SELECT_STYLE1 {
		width: 100%;
	}

	.SELECT_STYLE2 {
		width: 30%;
	}

	.TEXTAREA_STYLE1 {
		width: 100%;
	}

	.DIV_STYLE1 {
		float: right;
		vertical-align: top;
	}

	.DIV_STYLE2 {
		float: center;
		vertical-align: top;
	}

	.INPUT_STYLE1 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 30%
	}

	.INPUT_STYLE2 {
		BACKGROUND-COLOR: #FFFFCC;
		width: 100%
	}

	.FILE_STYLE1 {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseout {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mouseover {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#D7E7FA);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.btn3_mousedown {
		BORDER-RIGHT: #FFE400 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #FFE400 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #FFE400 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #FFE400 1px solid
	}

	.btn3_mouseup {
		BORDER-RIGHT: #2C59AA 1px solid;
		PADDING-RIGHT: 2px;
		BORDER-TOP: #2C59AA 1px solid;
		PADDING-LEFT: 2px;
		FONT-SIZE: 12px;
		FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#C3DAF5);
		BORDER-LEFT: #2C59AA 1px solid;
		CURSOR: pointer;
		COLOR: black;
		PADDING-TOP: 2px;
		BORDER-BOTTOM: #2C59AA 1px solid
	}

	.custom-select .el-input__inner {
		background-color: transparent;
		border: 1px solid #ccc; /* 或者其他你想要的边框颜色 */
	}
</style>
<style>
	body {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: .8em;
	}

	/* the div that holds the date picker calendar */
	.dpDiv {
	}


	/* the table (within the div) that holds the date picker calendar */
	.dpTable {
		font-family: Tahoma, Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-align: center;
		color: #505050;
		background-color: #ece9d8;
		border: 1px solid #AAAAAA;
	}


	/* a table row that holds date numbers (either blank or 1-31) */
	.dpTR {
	}


	/* the top table row that holds the month, year, and forward/backward buttons */
	.dpTitleTR {
	}


	/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTR {
	}


	/* the bottom table row, that has the "This Month" and "Close" buttons */
	.dpTodayButtonTR {
	}


	/* a table cell that holds a date number (either blank or 1-31) */
	.dpTD {
		border: 1px solid #ece9d8;
	}


	/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlightTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
	}


	/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
	.dpTDHover {
		background-color: #aca998;
		border: 1px solid #888888;
		cursor: pointer;
		color: red;
	}


	/* the table cell that holds the name of the month and the year */
	.dpTitleTD {
	}


	/* a table cell that holds one of the forward/backward buttons */
	.dpButtonTD {
	}


	/* the table cell that holds the "This Month" or "Close" button at the bottom */
	.dpTodayButtonTD {
	}


	/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
	.dpDayTD {
		background-color: #CCCCCC;
		border: 1px solid #AAAAAA;
		color: white;
	}


	/* additional style information for the text that indicates the month and year */
	.dpTitleText {
		font-size: 12px;
		color: gray;
		font-weight: bold;
	}


	/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
	.dpDayHighlight {
		color: 4060ff;
		font-weight: bold;
	}


	/* the forward/backward buttons at the top */
	.dpButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
		padding: 0px;
	}


	/* the "This Month" and "Close" buttons at the bottom */
	.dpTodayButton {
		font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
		font-size: 10px;
		color: gray;
		background: #d8e8ff;
		font-weight: bold;
	}
</style>
<style>
	.avatar-uploader .el-upload {
		border: 1px dashed red;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>

